<script setup lang="js">
import { getOrder, genOrder } from '@/api/orderAPI.js'
import { onMounted, ref } from 'vue'
import router from '@/router/index.js'
import container from '@/components/container.vue'
const orderData = ref()
onMounted(async () => {
  const res = await getOrder()
  orderData.value = res.data.result
  otherAddress.value = orderData.value.userAddresses.filter(
    (ele, index) => index !== addressindex.value
  )
  console.log('订单数据', orderData.value)
})
const addressindex = ref(0)
const otherAddress = ref()

//切换激活li
const onClickli = (ele) => {
  if (ele.select) {
    ele.select = false
  } else {
    otherAddress.value.forEach((ele) => {
      ele.select = false
    })
    ele.select = true
  }
}
//点击切换地址
const onConfirm = () => {
  const key = otherAddress.value.filter((ele) => ele.select)[0].id
  addressindex.value = orderData.value.userAddresses.findIndex(
    (obj) => obj.id === key
  )
  tanisShow.value = false
}
const tanisShow = ref(false)

//提交时
//创建data参数
const data = {
  deliveryTimeType: 1,
  payType: 1,
  payChannel: 1,
  buyerMessage: 1,
  goods: [],
  addressId: ''
}
const onSumbit = async () => {
  data.goods = orderData.value.goods.map((good) => {
    return {
      skuId: good.skuId,
      count: good.count
    }
  })
  data.addressId = orderData.value.userAddresses[addressindex.value].id
  const res = await genOrder(data)
  const id = res.data.result.id
  router.push(`/pay/${id}`)
}
</script>
<template>
  <div class="container check">
    <div class="order">
      <div class="left">
        <ul>
          <li>
            收货人：{{ orderData?.userAddresses[addressindex]?.receiver }}
          </li>
          <li>
            联系方式：{{ orderData?.userAddresses[addressindex]?.contact }}
          </li>
          <li>
            收获地址：{{ orderData?.userAddresses[addressindex]?.fullLocation }}
          </li>
        </ul>
        <el-button @click="tanisShow = true">增加地址</el-button>
        <el-button @click="tanisShow = true">修改地址</el-button>
      </div>
      <div class="tan" v-show="tanisShow">
        <ul>
          <li
            v-for="ele in otherAddress"
            :key="ele.id"
            style="margin: 20px; border-bottom: 1px solid #333; cursor: pointer"
            :class="{ li_active: ele.select }"
            @click="onClickli(ele)"
          >
            <ul>
              <li>收货人：{{ ele.receiver }}</li>
              <li>联系方式：{{ ele.contact }}</li>
              <li>收获地址：{{ ele.fullLocation }}</li>
            </ul>
          </li>
        </ul>
        <el-button style="margin: 10px" @click="onConfirm">确定修改</el-button>
      </div>
    </div>
    <div style="overflow: hidden">
      <container>
        <template #title> 商品详情 </template>
        <template #desc> 您已经选择以下商品： </template>
        <template #main>
          <div class="main">
            <ul class="goods">
              <li v-for="ele in orderData?.goods" :key="ele.id">
                <p>名称：{{ ele.name }}</p>
                <p>规格：{{ ele.attrsText }}</p>
                <p>总价：{{ ele.totalPrice }}元</p>
              </li>
            </ul>
            <ul class="myorder">
              <li>商品件数：{{ orderData?.summary.goodsCount }}</li>
              <li>商品总价：{{ orderData?.summary.totalPrice }}元</li>
              <li>运费：{{ orderData?.summary.postFee }}元</li>
              <li>应付总额：{{ orderData?.summary.totalPayPrice }}元</li>
              <el-button
                type="primary"
                @click="onSumbit"
                style="
                  display: block;
                  margin: 0 auto;
                  font-size: 20px;
                  line-height: 30px;
                  height: 32px;
                  width: 100px;
                  padding: 0;
                "
                >提交订单</el-button
              >
            </ul>
          </div>
        </template>
      </container>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.check {
  height: 500px;
  border: 10px solid $xtxColor;
  overflow: hidden;
  margin-bottom: 10px;
  overflow: auto;
  .left {
    font-size: 20px;
    margin-top: 20px;
    margin-left: 20px;
  }
  .tan {
    width: 400px;
    height: 330px;
    //添加阴影效果和边框
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    background-color: #fff;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100;
  }
}
.li_active {
  background-color: rgb(200, 255, 237);
}
.goods {
  margin-top: 20px;
  li {
    font-size: 18px;
    margin-bottom: 10px;
    margin-left: 20px;
  }
}
.main {
  display: flex;
  justify-content: space-between;
  padding-right: 100px;
  ul {
    font-size: 25px;
    li {
      margin-bottom: 10px;
    }
  }
}
</style>
